<template>
  <div class="contentShadow">
    <el-container>
      <el-header style="margin-bottom: 30px">
        <h1>论文成果提交表</h1>
        <el-tag>学号：{{ studentId }}</el-tag>
      </el-header>
      <el-main>
        <div>
          <el-form ref="form" :model="paper" :rules="rules" style="text-align:left" :inline="false">
            <el-form-item label="编号" prop="paperId">
              <el-input v-model="paper.paperId" type="text" disabled="disabled"></el-input>
            </el-form-item>
            <el-form-item label="标题" prop="paperTitle">
              <el-input v-model="paper.paperTitle" type="text"></el-input>
            </el-form-item>
            <el-form-item label="摘要" prop="paperAbstract">
              <el-input v-model="paper.paperAbstract" type=textarea :autosize="{ minRows: 5, maxRows: 8}"></el-input>
            </el-form-item>
            <el-form-item label="关键字" prop="paperKeyword">
              <el-input v-model="paper.paperKeyword" type="text"></el-input>
            </el-form-item>
            <el-form-item label="类型" prop="type">
              <el-radio-group v-model="paper.type">
                <el-radio :label="1">期刊</el-radio>
                <el-radio :label="2">会议</el-radio>
                <el-radio :label="3">学位论文</el-radio>
                <el-radio :label="4">其它</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="发表日期" prop="date">
              <el-date-picker v-model="paper.date" value-format="yyyy-MM-dd" type="date"></el-date-picker>
            </el-form-item>
            <el-form-item label="作者" prop="author">
              <el-input v-model="paper.author" type="text"></el-input>
            </el-form-item>
            <el-form-item label="位次" prop="order">
              <el-input v-model="paper.order" type=text></el-input>
            </el-form-item>
            <el-form-item label="奖励" prop="award">
              <el-input v-model="paper.award" type=text></el-input>
            </el-form-item>
          </el-form>
        </div>

        <div style="margin-top: 60px">
          <span>
            <el-button type="primary" @click="submit(paper)" :loading="loading">提交</el-button>
          </span>
          <span style="margin-left: 10px; margin-right: 10px">
            <el-upload
                action=""
                accept=".pdf"
                :auto-upload="false"
                :before-upload="beforeUpload"
                :on-change="uploadFile"
                style="display: inline-block;"
                v-if="uploadVisible === true"
            >
              <el-button type="danger">上传</el-button>
            </el-upload>
          </span>
          <span>
            <el-button type="success" @click="downloadFile" v-if="downloadVisible === true">下载</el-button>
          </span>
        </div>

      </el-main>
    </el-container>

  </div>
</template>

<script>
import {download, findPaperDetail, getStudentInformation, submitPaper, upload} from "@/api/student";

export default {
  data() {
    return {
      studentId: '',
      paper: {
        paperId: 0,
        paperTitle: '',
        paperAbstract: '',
        paperKeyword: '',
        type: '',
        date: '',
        author: '',
        order: '',
        award: '',
        filePath: ''
      },
      rules: {
        paperId: {required: true, message: "不可修改", trigger: "blur"},
        paperTitle: {required: true, message: "请输入论文标题", trigger: "blur"},
        paperAbstract: {required: true, message: "请输入论文摘要", trigger: "blur"},
        paperKeyword: {required: true, message: "请输入论文关键字", trigger: "blur"},
        type: {required: true, message: "请选择论文类型", trigger: "blur"},
        date: {required: true, message: "请选择发表日期", trigger: "blur"},
        author: {required: true, message: "请输入所有作者姓名", trigger: "blur"},
        order: [
          {required: true, message: "请输入自己的作者位次", trigger: "blur"},
          {
            validator: (rule, value, callback) => {
              const numberValue = Number(value);
              if (isNaN(numberValue)) {
                callback(new Error('请输入数字'));
              } else if (numberValue > 100 || !Number.isInteger(numberValue)) {
                callback(new Error('请输入100以内的整数'));
              } else {
                callback();
              }
            }, trigger: 'blur'
          }
        ],
        award: {required: false, message: "请输入论文所获荣誉", trigger: "blur"}
      },
      uploadVisible: false,
      downloadVisible: false,
      loading: false,
    };
  },
  mounted() {
    this.paper.paperId = Number(window.location.search.substring(4));
    getStudentInformation().then((res1) => {
      this.studentId = res1.data.studentId;
      if (this.paper.paperId !== 0) {
        findPaperDetail(this.paper.paperId).then(res2 => {
          this.paper = res2.data
          // console.log(this.paper)
          this.uploadVisible = true
          if (this.paper.filePath !== "null" && this.paper.filePath !== null && this.paper.filePath !== "") {
            this.downloadVisible = true
          }
        })
      }
    });
  },
  methods: {
    submit(paper) {
      // console.log(paper)
      this.$refs.form.validate(valid => {
        if (valid) {
          this.loading = true;
          submitPaper(paper).then(res => {
            if (res.code !== 200) {
              this.$message.error(res.msg)
            } else {
              this.$message.success(res.msg)
              this.$router.push("/student/paper");
            }
            this.loading = false
          })
        } else {
          this.$message.error("请按照正确格式填写表单")
          this.loading = false;
        }
      })
    },
    beforeUpload(file) {
      // console.log(file);
    },
    uploadFile(file) {
      const uploadRequest = new FormData();
      uploadRequest.append('file', file.raw);
      uploadRequest.append('type', 1);
      uploadRequest.append('id', this.paper.paperId);
      // console.log(uploadRequest)
      // 发起上传请求
      upload(uploadRequest).then(response => {
        if (response.code === 200) {
          this.$message.success(response.msg)
          this.$router.push("/student/paper");
        } else {
          this.$message.error(response.msg)
        }
      }).catch(error => {
        // console.log(error)
        this.$message.error('文件上传失败')
      });
    },
    downloadFile() {
      const downloadRequest = new FormData();
      downloadRequest.append('type', 1);
      downloadRequest.append('id', this.paper.paperId);
      download(downloadRequest).then(response => {
        // 创建 a 标签进行下载
        const url = window.URL.createObjectURL(new Blob([response]))
        const link = document.createElement('a')
        link.href = url
        link.setAttribute('download', this.paper.filePath)
        document.body.appendChild(link)
        setTimeout(() => {
          link.click();
          document.body.removeChild(link); // 清理创建的a标签
        }, 0);
      })
    }
  }
}
</script>

